<template>
  <div v-loading="loading" element-loading-text="报表数据获取中，请稍后...">
    <div style="padding-top: 20px;display: table;width:100%;" v-if="false">
      <div class="report" style="display:table-cell">
        <div class="text">
          <ul class="results_doc">
            <li>
              国内组织人次与去年季度数据（68266）比较，同比增长为：1%，与上季度数据（22070）比较，环比增长为：213%，在本地级市排<span
              style="color:#fb8d50;">第3名</span>；
            </li>
            <li>
              国内接待人次去年季度数据为0，上季度数据为0；，在本地级市排<span
              style="color:#fb8d50;">第29名</span>；
            </li>
            <li>
              国内组织人天与去年季度数据（150171）比较，同比增长为：11%，与上季度数据（64009）比较，环比增长为：162%，在本地级市排<span style="color:#fb8d50;">第4名</span>；
            </li>
            <li>
              国内接待人天去年季度数据为0，上季度数据为0；，在本地级市排<span style="color:#fb8d50;">第42名</span>；
            </li>
          </ul>
        </div>
      </div>
    </div>
    <v-info v-if="shouInfo" :name="propName" :ltjnum="3" :license="propLicense"></v-info>
    <div id="printer" style="margin-top:20px;border: 1px solid #CCCCCC;text-align: center;">
      <el-row>
        <el-col :span="6">
          <div class="grid-content" style="height:111px;line-height: 111px;text-align:center;">指标名称</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content" style="height:111px;line-height: 111px;">代码</div>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col>
              <div class="grid-content">人次数</div>
            </el-col>
            <el-col>
              <div class="grid-content">本季</div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">组织</div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">接待</div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col>
              <div class="grid-content">人天数</div>
            </el-col>
            <el-col>
              <div class="grid-content">本季</div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">组织</div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">接待</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content">甲</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content">乙</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">01</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">02</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">05</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">06</div>
        </el-col>
      </el-row>
      <el-row v-for="(item,index) in zzjdDataArray" :key="item.code">
        <el-col :span="6">
          <div class="grid-content">{{item.title}}</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content">{{item.code}}</div>
        </el-col>
        <el-col :span="4" v-for="(d,i) in item.data" :key="i">
          <div class="grid-content">{{d}}</div>
        </el-col>
        <div v-if="index > 31">
          <el-col :span="4">
            <div class="grid-content">---</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">---</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">---</div>
          </el-col>
        </div>
      </el-row>
    </div>
    <div style="padding-top:10px;">
      <span>单位负责人： {{agencyinfo.corporationName}}</span>
      <span style="padding-left:20px;">填表人：{{name}}</span>
      <span style="padding-left:20px;">电话：{{phone}}</span>
      <span style="padding-left:20px;">填报日期：{{date}}</span>
    </div>
  </div>
</template>
<script>
  import {mapGetters, mapActions} from 'vuex'
  import vInfo from './Infomation.vue'

  export default {
    components: {
      vInfo
    },
    props: [
      'date','propName','propLicense'
    ],
    mounted(){
      this.loading = true;
      this.$nextTick(()=>{
        setTimeout(()=>{
          this.loading = false;
        },1000)
      })
    },
    computed: {
      ...mapGetters(['reportDetail']),
      agencyinfo(){
        return this.reportDetail.agencyInfo ? this.reportDetail.agencyInfo : {};
      },
      zzjdDataArray() {
        let zzjdarr = [
          {
            title: '合计',
            code: '01',
            data: [0, 0, 0, 0]
          }, {
            title: '北京',
            code: '02',
            data: [0, 0, 0, 0]
          }, {
            title: '天津',
            code: '03',
            data: [0, 0, 0, 0]
          }, {
            title: '河北',
            code: '04',
            data: [0, 0, 0, 0]
          }, {
            title: '山西',
            code: '05',
            data: [0, 0, 0, 0]
          }, {
            title: '内蒙古',
            code: '06',
            data: [0, 0, 0, 0]
          }, {
            title: '辽宁',
            code: '07',
            data: [0, 0, 0, 0]
          }, {
            title: '吉林',
            code: '08',
            data: [0, 0, 0, 0]
          }, {
            title: '黑龙江',
            code: '09',
            data: [0, 0, 0, 0]
          }, {
            title: '上海',
            code: '10',
            data: [0, 0, 0, 0]
          }, {
            title: '江苏',
            code: '11',
            data: [0, 0, 0, 0]
          }, {
            title: '浙江',
            code: '12',
            data: [0, 0, 0, 0]
          }, {
            title: '安徽',
            code: '13',
            data: [0, 0, 0, 0]
          }, {
            title: '福建',
            code: '14',
            data: [0, 0, 0, 0]
          }, {
            title: '江西',
            code: '15',
            data: [0, 0, 0, 0]
          }, {
            title: '山东',
            code: '16',
            data: [0, 0, 0, 0]
          }, {
            title: '河南',
            code: '17',
            data: [0, 0, 0, 0]
          }, {
            title: '湖北',
            code: '18',
            data: [0, 0, 0, 0]
          }, {
            title: '湖南',
            code: '19',
            data: [0, 0, 0, 0]
          }, {
            title: '广东',
            code: '20',
            data: [0, 0, 0, 0]
          }, {
            title: '广西',
            code: '21',
            data: [0, 0, 0, 0]
          }, {
            title: '海南',
            code: '22',
            data: [0, 0, 0, 0]
          }, {
            title: '重庆',
            code: '23',
            data: [0, 0, 0, 0]
          }, {
            title: '四川',
            code: '24',
            data: [0, 0, 0, 0]
          }, {
            title: '贵州',
            code: '25',
            data: [0, 0, 0, 0]
          }, {
            title: '云南',
            code: '26',
            data: [0, 0, 0, 0]
          }, {
            title: '西藏',
            code: '27',
            data: [0, 0, 0, 0]
          }, {
            title: '陕西',
            code: '28',
            data: [0, 0, 0, 0]
          }, {
            title: '甘肃',
            code: '29',
            data: [0, 0, 0, 0]
          }, {
            title: '青海',
            code: '30',
            data: [0, 0, 0, 0]
          }, {
            title: '宁夏',
            code: '31',
            data: [0, 0, 0, 0]
          }, {
            title: '新疆',
            code: '32',
            data: [0, 0, 0, 0]
          }, {
            title: '一日游组织人次数',
            code: '33',
            data: [0]
          }, {
            title: '过夜游组织人次数',
            code: '34',
            data: [0]
          }, {
            title: '过夜游组织人天数',
            code: '35',
            data: [0]
          },
        ];
        if(this.reportDetail.internalData){
          console.log(111);
          const internalData = JSON.parse(this.reportDetail.internalData);
          internalData.arr.map((item,index) => {
            zzjdarr[index].data = [...item];
          })
        }
        return zzjdarr;
      },
      internalData(){
        return this.reportDetail.internalData?JSON.parse(this.reportDetail.internalData):{};
      },
      shouInfo() {
        return this.$route.path.indexOf('gov') > -1
      },
      name() {
        return this.internalData.name
      },
      phone() {
        return this.internalData.phone
      },
    },
    data(){
      return {
        loading:false,
      }
    }
  }
</script>
<style scoped>
  .report {
    height: 100%;
    margin: 0px 5px;
    border: 1px solid #fb8d50;
  }

  .text {
    float: left;
    margin-left: 15px;
    margin-top: 5px;
    word-break: normal;
    font-size: 12px;
  }

  .results_doc {
    margin: 5px 10px;
    padding-left: 10px;
  }

  .results_doc li {
    list-style-type: disc;
    padding: 2px 0px;
  }

  .grid-content {
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    min-height: 36px;
    line-height: 36px;
    color: #333333;
  }
</style>
